<!--
* @description  参数1
* @fileName  allSale
* @author userName
* @date 2021-04-15 16:39:34
* @version V1.0.0
!-->
<template>
    <div>
        <span style="position: relative; left: 430px; font-weight: bold; font-size: 33px">菜品统计图</span>
        <div id="main" style="width: 1000px; height: 500px"></div>
        <div style="position: relative; top: 50px">
            <span style="position: relative; left: 430px; font-weight: bold; font-size: 33px"> 菜类统计图 </span>
            <div id="mains" style="width: 1000px; height: 500px"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { selectfood } from '../../api/food';
import { allcate } from '../../api/cate';
import { sevenValume } from '../../api/valumes';
export default {
    props: {
        // 父辈向子辈传参
    },
    name: 'allSale',
    data() {
        return {
            sevenValumelist: [],

            option: {
                title: {
                    // text: '堆叠区域图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: []
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: []
            },

            options: {
                title: {
                    // text: '堆叠区域图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: []
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: []
            }
        };
    },
    created() {
        // 实例被创建之后执行代码
        selectfood()
            .then((res) => {
                for (var i = res.data.length - 1; i >= 0; i--) {
                    let model1 = {
                        name: '',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    };
                    this.option.legend.data.push(res.data[i].name);
                    model1.name = res.data[i].name;
                    this.option.series.push(model1);
                }
            })
            .catch(() => {
                this.$message.error('出错了哦');
            });
        allcate()
            .then((res) => {
                for (var i = res.data.catelist.length - 1; i >= 0; i--) {
                    let model2 = {
                        name: '',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    };
                    this.options.legend.data.push(res.data.catelist[i].cate_name);
                    model2.name = res.data.catelist[i].cate_name;
                    this.options.series.push(model2);

                }
            })
            .catch(() => {});
        var that = this;
        sevenValume()
            .then((res) => {
                // console.log(res);
                if (res.code == 200) {
                    {
                        var xAxisData = [];
                        for (var i = 0; i < res.data.length; i++) {
                            xAxisData.push(res.data[i].daytime);
                        }
                        that.option.xAxis[0].data = xAxisData;
                        that.options.xAxis[0].data = xAxisData;
                        //遍历传过来的数据  菜名
                        for (var i = 0; i < res.data.length; i++) {
                            // 遍历vue里面的数据
                            for (var k = 0; k < that.option.series.length; k++) {
                                that.option.series[k].data.push(0);
                                // 遍历传过来的菜名数据
                                for (var j = 0; j < res.data[i].foodmess.length; j++) {
                                    if (res.data[i].foodmess[j].foodname == that.option.series[k].name) {
                                        // console.log(k);
                                        that.option.series[k].data[i] = res.data[i].foodmess[j].foodprice;
                                    }
                                }
                            }
                        }

                        //遍历传过来的数据   菜类
                        for (var i = 0; i < res.data.length; i++) {
                            // 遍历vue里面的数据
                            for (var k = 0; k < that.options.series.length; k++) {
                                that.options.series[k].data.push(0);
                                // 遍历传过来的菜名数据
                                for (var j = 0; j < res.data[i].moldmess.length; j++) {
                                    if (res.data[i].moldmess[j].moldname == that.options.series[k].name) {
                                        // console.log(k);
                                        that.options.series[k].data[i] = res.data[i].moldmess[j].moldprice;
                                    }
                                }
                            }
                        }
                    }

                    // console.log('aaaaaaaaaaaaaa');
                    // console.log(that.option);
                } else {
                    this.$message.error('出错了哦');
                }
                that.showEchart();
                that.showEcharts();
            })
            .catch((res) => {
                this.$message.error('出错了哦');
            });
    },
    computed: {
        // 计算属性
    },
    components: {
        // 组件的引用
    },
    methods: {
        // 方法
        showEchart() {
            // 页面进入时加载内容
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);

            this.option && myChart.setOption(this.option);
        },
        showEcharts() {
            var chartDoms = document.getElementById('mains');
            var myCharts = echarts.init(chartDoms);

            this.options && myCharts.setOption(this.options);
        }
    },
    mounted() {}
};
</script>
<style scoped lang="less"></style>
